<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽入门使用</title>
</head>
<body>

<!--
  作用于插槽的应用场景：父组件对子组件的内容进行加工处理
-->

<div id="app">
  <fruit-list :list="list">
    <template slot-scope="slotProps">
      <strong v-if="slotProps.info.id === 2">
        {{slotProps.info.name}}
      </strong>
      <span v-else>{{slotProps.info.name}}</span>
    </template>
  </fruit-list>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('fruit-list', {
    template: `
      <div>
        <ul>
          <li v-for="item in list" :key="item.id">
            <slot :info="item">{{item.name}}</slot>
          </li>
        </ul>
      </div>
    `,
    props: ['list']
  })

  let vm = new Vue({
    el: '#app',
    data: {
      list: [
        {
          id: 1,
          name: 'apple'
        },
        {
          id: 2,
          name: 'orange'
        },
        {
          id: 3,
          name: 'banana'
        },
      ]
    }
  })
</script>

</body>
</html>